<html>
    <head>
        <title>nMusic.</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="preload" href="resources/promise-queues.js" as="script">
		<link rel="preload" href="resources/libWeb.js" as="script">
        <link rel="preload" href="resources/base.js" as="script">
        <link rel="preload" href="resources/settings.js" as="script">
        <meta charset="UTF-8" />
        <meta name="robots" content="noindex, nofollow" />
        <script src="resources/promise-queues.js" async></script>
		<script src="resources/libWeb.js" async></script>
        <script src="resources/base.js" async></script>
        <script src="resources/settings.js" async></script>
        <style id="poly-item-css">
            .poly-item {
                padding-left: 5px;
                box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08);
                border: 1px solid rgba(255, 255, 255, 0.4);
                margin-bottom: 10px;
            }
        </style>
        <style>
                * {
				    -webkit-font-smoothing: antialiased;
				    -moz-osx-font-smoothing: grayscale;
			    }
                body {
                    background-color: #111111;
                    color: white;
                }
                .menu {
                    position: fixed;
                    top: 0;
                    margin: auto;
                    left: 0;
                    right: 0;
                    width: 100%;
                    height: 32px;
                    border-bottom: 1px solid green;
                    background-color: inherit;
                    margin-right: 0px;
                    margin-left: -1px;
                }
                .poly-item-light {
                    padding-left: 5px;
                    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
                    border: 1px solid black;
                    margin-bottom: 10px;
                }
                .unselectable {
                    -webkit-user-select: none;      
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }
            </style>
            <style id="_css_fonts">
                html {
                    font-family: -apple-system, BlinkMacSystemFont, 'Product Sans', 'Google Sans', 'Segoe UI', 'Arial', sans-serif;
                }
            </style>
            <style>
                #new-menu {
                    position: fixed;
                    background-color: #111111;
                    left: 0px;
                    bottom: 0px;
                    height: 30%;
                    width: 100%;
                    z-index: 5;
                    padding-left: 5px;
                    transition: opacity 1.5s cubic-bezier(.68,-0.55,.27,1.55);
                    visibility: visible;
                    opacity: 1;
                    border-top: 1px solid green;
                }
                .new-menu-button {
                    display: table;
                }
                .new-menu-icon {
                    width: 32px;
                    height: 32px;
                    vertical-align: middle;
                    display: inline-flex;
                }
                .new-menu-label {
                    vertical-align: middle;
                    display: inline-flex;
                }
                #new-menu-toggler {
                    position: absolute;
                    background-color: rgba(110, 110, 110, 0.15);
                    border: 1px solid crimson;
                    border-right: none !important;
                    bottom: 5%;
                    right: 0px;
                    height: 48px;
                    width: 48px;
                    z-index: 6;
                    text-align: center;
                    vertical-align: middle;
                    backdrop-filter: blur(5px);
                }
                .new-menu-toggler-icon {
                    width: 48px;
                    height: 48px;
                }
                .new-menu-search {
                    border: none;
                    padding: 1px;
                    background-color: inherit;
                    margin-top: 0px;
                    width: 100vh;
                    border-bottom: 1px solid greenyellow;
                    margin-top: 15px;
                }
                .hide {
                    opacity: 0 !important;
                    pointer-events: none;
                }
            </style>
            <div id="new-menu" style="border-right: 1px solid green;" class="hide">
                <div style="float: left;">
                	<h1 style="display: inline-block; text-align: center; margin-top: 5px; margin-bottom: 5px;"><span style="color: red;">n</span><span style="color: lightgreen;">Music</span>.</h1>
               		<p style="display: inline-block; text-align: center; margin-top: -15px; font-family: monospace;">infdev</p>
                </div>
                <div style="float: right;">
                	<input id="new-menu-search" class="new-menu-search" placeholder="Search." autocomplete="off" />
                </div>
                <div style="clear: both;"></div>
                <hr style="margin-left: -5px;">
                <div id="new-menu-settings-button" class="new-menu-button">
                    <img class="new-menu-icon" style="vertical-align: middle;" src="resources/icons/settings.png" alt="%settings" />
                    <h3 class="new-menu-label">Settings.</h3>
                </div>
                <div class="new-menu-button">
                    <img class="new-menu-icon" style="vertical-align: middle;" src="resources/icons/share.png" alt="%share" />
                    <h3 class="new-menu-label">Share.</h3>
                </div>
            </div>
            <div id="new-menu-toggler" style="display: none; visibility: hidden;">
                <img id="new-menu-collapser" class="new-menu-toggler-icon" style="vertical-align: middle;" src="resources/icons/collapse.png" alt="&lt;&lt;" />
                <script async>
                    function isVisible(ele) {
                        return !ele.classList.contains("hide");
                    }
                </script>
            </div>
            <!--<div class="menu">
                <p style="padding-left: 5px; line-height: 20%;vertical-align: middle;font-weight: bold;">
                <span style="color: red;">n</span><span style="color: lightgreen;">Music</span>
                <sub style="font-size: xx-small;line-height: 20%;">infdev</sub>
                <img id="ntube-winter-logo" src="resources/events/christmas.png" title="Merry Christmas!" style="display: none; visibility: hidden; width: 18px; height: 16px; position: absolute; top: 0; left: 0;" />
                <style>
                    .dropbtn {
                        color: white;
                        background: inherit;
                        padding: 16px;
                        font-size: 16px;
                        border: none;
                        padding-top: 5px;
                        padding-left: 5px;
                        width: 40px;
                        height: 40px;
                    }
                </style>
                <button class="dropbtn" title="Settings and Integrations Menu" id="button-settings" style="position: absolute; right: 0px; top: -5px;">
                    <img style="vertical-align: middle;" src="resources/icons/settings.png" alt="%settings" />
                </button>
            </p>-->
        </div>
        <!--<div style="padding-bottom: 30px;"></div>-->
        <script defer="defer">
        window.fadeout = function(e) {
            window.fadeout(e, null);
        }
        window.fadeout = function(e, callback) {
            var amounts = 32;
            var currentAmount = 1;
            var decrease = 1 / amounts;
            var n = setInterval(function() {
                if (!isHidden()) e.style.opacity = currentAmount -= decrease;
                if (currentAmount <= 0) {
                    clearInterval(n);
                    if (callback !== undefined && callback !== null) {
                        callback();
                    }
                }
            }, 25);
        }
        window.fadein = function(e, callback) {
            var amounts = 32;
            var currentAmount = 0;
            var decrease = 1 / amounts;
            var n = setInterval(function() {
                if (!isHidden()) e.style.opacity = currentAmount += decrease;
                if (currentAmount >= 1) {
                    clearInterval(n);
                    if (callback !== undefined && callback !== null) {
                        callback();
                    }
                }
            }, 25);
        }
        window.hide = function(e) {
            e.style.display = "none";
            e.style.visibility = "hidden";
        }
        window.show = function(e) {
            e.style.display = "";
            e.style.visibility = "";
        }
        window.nMusic = {
            currentSession: null,
            playing: false,
        };
        function makeBroadcastChannel(o, ssid) {
            if (window.BroadcastChannel) {
                o["channel"] = new BroadcastChannel(ssid);
                window.onbeforeunload = function() {
                    o["channel"].close();
                }
                o["channel"].onmessage = function(message) {
                    var n = JSON.parse(message.data);
                    if (n["type"] === "nMusic_submit") {
                        if (n["url"]) {
                            const data = n["url"];
                            if (data === null || data === undefined || data.length === 0 || data === " ") {
                                var r = {};
                                r["type"] = "nMusic_response";
                                r["message"] = "FAIL";
                                r["reason"] = "data is corrupted!";
                                o["channel"].postMessage(JSON.stringify(r));
                                return;
                            }
                            var div = document.createElement("div");
                            div.setAttribute("data-url", data);
                            div.setAttribute("data-url-verified", false);
                            div.style.paddingLeft = "5px";
                            div.style.borderBottom = "1px solid green";
                            var p = document.createElement("p");
                            if (n["videoID"]) {
                                p.innerHTML = n["videoID"] + " (via StM, Waiting...)";
                            }else {
                                p.innerHTML = data + " (via StM, Waiting...)";
                            }
                            div.appendChild(p);
                            id("__main_ui_playlist_div").appendChild(div);
                            playlist_iter();
                            var r = {};
                            r["type"] = "nMusic_response";
                            r["message"] = "OK";
                            o["channel"].postMessage(JSON.stringify(r));
                        }else {
                            var r = {};
                            r["type"] = "nMusic_response";
                            r["message"] = "FAIL";
                            r["reason"] = "url is missing!";
                            o["channel"].postMessage(JSON.stringify(r));
                        }
                    }
                };
            }
        }
        function __session(pssid) {
            show(id("__overlay"));
            fadein(id("__overlay"));
            hide(id("__init__div"));
            show(id("__main_ui"));
            show(id("new-menu-toggler"));
            const ssid = pssid !== undefined && pssid !== null ? pssid : generateGUID();
            id("__main_ui_id").innerHTML = ssid;
            const o = window.nMusic.currentSession = {
                sessionType: (pssid !== undefined && pssid !== null ? "local" : "temporary"),
                uuid: ssid,
                isPlaying: false,
                sessionID: ssid,
                integration: {
                    deezer: null,
                    spotify: {},
                },
                settings: {
                    deezer_quality: "mp3-lq",
                }
            };
            makeBroadcastChannel(o, ssid);
            return o;
        }
        window.nMusic.localSession = function() {
            if (Settings.exists("nmusic_session")) {
                const o = Settings.load("nmusic_session");
                if (o === null || o === undefined) {
                    alert("Failed to load session.\nError: SESSION_IS_NULL");
                    return;
                }
                hide(id("__init__div"));
                show(id("__main_ui"));
                id("__main_ui_id").innerHTML = o["uuid"];
                window.nMusic.currentSession = o;
                makeBroadcastChannel(o, o["uuid"]);
                // TODO: Setting loading
                return o;
            }else {
                const ssid = generateGUID();
                const session = __session(ssid);
                if (!Settings.save("nmusic_session", session)) {
                    alert("Failed to save session, falling back to temporary session.");
                    session["sessionType"] = "temporary";
                }
                makeBroadcastChannel(session, ssid);
                return session;
            }
        }
        window.nMusic.oneTimeSession = function() {
            return window.nMusic.currentSession = __session(null);
        }
        </script>
        <style>
            .fancy_button {
                color: inherit;
                background: inherit;
                border: 1px solid green;
                font-family: inherit;
                font-size: large;
            }
            .rainbow{
		        animation: rainbow 10s linear;
		        animation-iteration-count: infinite;
            }
            @keyframes rainbow{
		    100%,0%{
			    color: rgb(255,0,0);
		    }
		    8%{
			    color: rgb(255,127,0);
		    }
		    16%{
			    color: rgb(255,255,0);
		    }
		    25%{
			    color: rgb(127,255,0);
		    }
		    33%{
			    color: rgb(0,255,0);
		    }
		    41%{
			    color: rgb(0,255,127);
		    }
		    50%{
			    color: rgb(0,255,255);
		    }
		    58%{
			    color: rgb(0,127,255);
		    }
		    66%{
			    color: rgb(0,0,255);
		    }
		    75%{
			    color: rgb(127,0,255);
		    }
		    83%{
			    color: rgb(255,0,255);
		    }
		    91% {
			    color: rgb(255,0,127);
		    }
        }
        </style>
    </head>
    <div style="position: fixed; width: 100%; height: 100%; background-color: inherit; z-index: 100; top: 0px; left: 0px;">
        <div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center;">
            <h1 style="margin-top: 5px; margin-bottom: 5px;">it's dead, jim.</h1>
            <p style="margin-top: 5px; margin-bottom: 5px;">nMusic will be back in nTube 1.5.x stable.</p> 
        </div>
    </div>
    <body>
        <div class="menu">
			<p style="padding-left: 5px; line-height: 20%;vertical-align: middle;font-weight: bold;display:inline-block;">
				<span style="color: red;">n</span><span style="color: lightgreen;">Music</span>
				<sub style="font-size: xx-small;line-height: 20%;">infdev</sub>
            </p>
            <span style="display: inline-block;vertical-align: middle;">&centerdot;</span>
            <p style="display: inline-block;vertical-align: middle;">No session active.</p>
			<div style="float: right; height: 100%;">
				<div style="height: 100%;">
					<style>
					#search_overlay {
						z-index: 8;
						position: fixed;
						background-color: inherit;
						width: 100%;
						height: 100%;
					}
					.search_hidden {
                        display: inherit;
                        visibility: inherit;
					}
					#search_bar {
						background-color: inherit;
						color: inherit;
						border: none;
						border-left: 1px solid green;
						height: calc(100% - 4px);
						width: 40vw;
						transition: border-bottom .5s ease-in-out;
						font-family: monospace;
						font-size: large;
						padding-left: 5px;
					}
					#search_bar:focus {
						border-bottom: 1px solid green;
					}
					#search_button {
						border: none;
						border-left: 1px solid rgba(0,128,0,.7);
						border-right: none;
						height: 100%;
						background-color: inherit;
						color: inherit;
						margin-right: 0px;
						font-family: inherit;
					}
					</style>
					<!--
						search_bar: width: was 400px now 40vw;
					-->
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." />
					<button id="search_button" onclick="search_start(null);">Search</button>
					<script>
                        run_promise(function() {
                        	SearchBar.init();
                        	window.onload = function() {
                            	if (getQueryVariable("for") !== null) {
                                	const f = getQueryVariable("for");
                                	document.getElementById("search_bar").value = f;
                                	SearchBar.search(null);
                            	}
                        	}
                        });
					</script>
				</div>
			</div>
        </div>
        <div style="margin-bottom: 30px;"></div>
        <div id="__init__div">
                <center>
                    <h1 style="font-size: 72px;"><span style="color: red;">not</span><span style="color: lightgreen;">Music</span><span class="rainbow">.</span></h1>
                    <p>A universal music client, without ads or interruptions.</p>
                    <div class="poly-item" style="width: 50%;">
                        <div style="padding-bottom: 10px;"></div>
                        <button class="fancy_button" disabled="true" style="margin-bottom: 5px;" onclick="nMusic.currentSession = nMusic.localSession()">Create A New Session.</button> <br>
                        <button class="fancy_button" disabled="true" style="margin-bottom: 5px;" onclick="nMusic.currentSession = nMusic.oneTimeSession()">Create A One Time
                            Session.</button> <br>
                        <button class="fancy_button" disabled="true">Load A Previous Session.</button>
                        <div style="padding-top: 10px;"></div>
                    </div>
                    <div class="poly-item" style="width: 50%;">
                        <div style="padding-bottom: 10px;"></div>
                        <p style="font-weight: bold; color: orangered;">WARNING: A major change is planned, during this time nMusic will become non-functional.</p>
                        <p style="font-weight: bold;">NOTE: This is an infdev build, things may and will change over time.</p>
                        <p>Supported Services:</p>
                        <ul style="text-align: left;">
                            <li>Soundcloud</li>
                            <li>YouTube via nTube</li>
                            <li>Indiviual Radio Stations</li>
                            <li>Deezer (experimental)</li>
                        </ul>
                        <p>Planned Services:</p>
                        <ul style="text-align: left;">
                            <li>Podcasts via the nMusic API</li>
                            <li>Radio Stations via the nMusic API</li>
                            <li>And more!</li>
                        </ul>
                        <div style="padding-top: 10px;"></div>
                    </div>
                    <p style="font-family: monospace; text-align: center;">nMusic infdev &centerdot; build: 30-08-2020 &centerdot; branch: rolling-1.5</p>
                </center>
        </div>
        <div id="__main_ui" style="display: none; visibility: hidden; margin-top: -15px;">
            <div id="deezer-setup-ui" class="poly-item" style="display: none; visibility: hidden; background-color: rgba(20, 20, 20, 0.8); color: white; backdrop-filter: blur(10px); width: 40%; height: 60%; position: fixed; z-index: 4; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">
                <h3>Deezer Setup.</h3>
                <p>
                    nMusic requires your ARL (session) cookie in order to get data from the service. <br>
                    This can be accquired using your browser's development tools.
                </p>
                <h3>How to.</h3>
                <p style="font-family: fixed, monospace;">
                    Firefox: Inspect Element &gt; Storage &gt; Cookies &gt; Copy the "Value" of "arl". <br>
                    Chrome-based browsers: Inspect &gt; Application &gt; Cookies &gt; [url if required] &gt; Copy the value of "arl".
                </p>
                <center>
                    <p>Enter your session ARL.</p>
                    <input id="deezer-setup-arl-input" size="48" type="password" autocomplete="off" style="margin-left: -5px;" />
                    <div style="display: table;">
                        <button id="deezer-setup-arl-login">Login.</button>
                        <button id="deezer-setup-arl-cancel">Cancel.</button>
                        <script defer="defer">
                            id("deezer-setup-arl-cancel").onclick = function() {
                                id("deezer-setup-arl-login").value = "";
                                id("deezer-setup-ui").style.display = "none";
                                id("deezer-setup-ui").style.visibility = "hidden";
                            }
                            id("deezer-setup-arl-login").onclick = function() {
                                const pwd = id("deezer-setup-arl-input").value;
                                if (pwd.length <= 128 || pwd === null || pwd === undefined) {
                                    alert("Invalid ARL entered.");
                                    return;
                                }else {
                                    window.nMusic.currentSession.integration.deezer = pwd;
                                    id("deezer-setup-ui").style.display = "none";
                                    id("deezer-setup-ui").style.visibility = "hidden";
                                    id("ui-deezer-integration").innerHTML = "Connected.";
                                }
                            }
                        </script>
                    </div>
                </center>
            </div>
            <div id="newsettings" class="poly-item" style="display: none; visibility: hidden; background-color: rgba(20, 20, 20, 0.8); color: white; backdrop-filter: blur(10px); width: 40%; height: 60%; position: fixed; z-index: 3; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">
                <div style="background-color: rgba(60, 60, 60); margin-left: -5px; height: 32px;">
                    <p style="float: left; line-height: 0%; margin-left: 5px;">nMusic.</p>
                    <button id="button-new-settings-exit" title="Close Settings UI." style="float: right; border: darkgray; background-color: gray; width: 32px; height: 32px;">X</button>
                    <script defer="defer">
                        id("button-new-settings-exit").onclick = function() {
                            id("newsettings").style.display = "none";
                            id("newsettings").style.visibility = "hidden";
                        }
                        /*id("button-settings").onclick = function() {
                            if (window.nMusic.currentSession !== undefined && window.nMusic
                                .currentSession !== null) {
                                show(id("newsettings"));
                            }else {
                                alert("A session is required to configure things!");
                            }
                        }*/
                    </script>
                    <div style="clear: both;"></div>
                </div>
                <style>
                    .new-cfg-tab {
                        overflow: hidden;
                        background-color: gray;
                    }
                    .new-cfg-tab button {
                        background-color: inherit;
                        float: left;
                        border: none;
                        outline: none;
                        cursor: pointer;
                        padding: 14px 16px;
                        transition: 0.3s;
                        font-family: inherit;
                    }
                    .new-cfg-tab button:hover {
                        background-color: darkgray;
                    }
                    .new-cfg-tab button.active {
                        background-color: darkgray;
                    }
                    .tabcontent {
                        display: none;
                        padding: 6px 12px;
                        border-top: none;
                        margin-left: -5px;
                        animation: fadeEffect 1s;
                        overflow-y: auto;
                        overflow-x: hidden;
                    }
                    @keyframes fadeEffect {
                        from {opacity: 0;}
                        to {opacity: 1;}
                    }
                    .tablinks {
                        color: inherit;
                    }
                </style>
                <script defer="defer">
                    function __new_config_ui_open(event, tab) {
                        var i, tabcontent, tablinks;
                          tabcontent = document.getElementsByClassName("tabcontent");
                          for (i = 0; i < tabcontent.length; i++) {
                            tabcontent[i].style.display = "none";
                          }
                          tablinks = document.getElementsByClassName("tablinks");
                          for (i = 0; i < tablinks.length; i++) {
                            tablinks[i].className = tablinks[i].className.replace(" active", "");
                          }
                          id(tab).style.display = "block";
                          evt.currentTarget.className += " active";
                    }
                </script>
                <div class="new-cfg-tab" style="margin-left: -5px;">
                    <button class="tablinks" onclick="__new_config_ui_open(event, 'newcfg-Integrations')">Integrations.</button>
                    <button class="tablinks" onclick="__new_config_ui_open(event, 'newcfg-Audio')">Audio.</button>
                    <button class="tablinks" onclick="__new_config_ui_open(event, 'newcfg-Deezer')">Deezer.</button>
                    <button class="tablinks" onclick="__new_config_ui_open(event, 'newcfg-Lab')">Lab.</button>
                </div>
                <div id="newcfg-Integrations" class="tabcontent" style="display: block;">
                    <h3>Integrations.</h3>
                    <p style="color: orangered;">WARNING: These features are experimental and might get you suspended from services. (unlikely lol)</p>
                    <h3>Deezer.</h3>
                    <div style="line-height: 0%; margin-bottom: -10px; margin-top: -10px; padding-bottom: 10px;">
                        <p style="float: left; vertical-align: middle;">Integration Status: </p>
                        <p id="ui-deezer-integration" style="float: right; vertical-align: middle;">NOT SETUP</p>
                        <div style="clear: both;"></div>
                    </div>
                    <div style="display: table;">
                        <button id="ui-connect-deezer">Connect to Deezer.</button>
                        <script>
                            function deezerConnect() {
                                if (window.nMusic.currentSession && window.nMusic.currentSession.integration
                                    .deezer !== null && typeof window.nMusic.currentSession.integration
                                    .deezer === "string") {
                                    alert("Already connected.\nYou need to disconnect first.");
                                }else {
                                    id("deezer-setup-ui").style.display = "";
                                    id("deezer-setup-ui").style.visibility = "";
                                }
                            }
                            id("ui-connect-deezer").onclick = deezerConnect;
                        </script>
                    </div>
                    <h3>Spotify.</h3>
                    <p>Coming soon.</p>
                </div>
                <div id="newcfg-Audio" class="tabcontent" style="display: hidden;">
                    <h3>Audio.</h3>
                </div>
                <div id="newcfg-Deezer" class="tabcontent" style="display: hidden;">
                    <h3>Deezer: Settings.</h3>
                    <div>
                        <p style="float: left; vertical-align: middle; margin-top: 2px;">Quality.</p>
                        <select id="deezer-settings-quality" style="float: right; vertical-align: middle;">
                            <option value="mp3-ulq">MP3 32kbps (deprecated)</option>
                            <option value="mp3-vlq">MP3 64kbps</option>
                            <option value="mp3-lq" selected="true">MP3 128kbps (default)</option>
                            <option value="mp3-mq">MP3 256kbps</option>
                            <option value="mp3-hq">MP3 320kbps</option>
                            <option value="flac">FLAC 1411kbps</option>
                            <option value="surr-lq">M4A Surround (LQ)</option>
                            <option value="surr-mq">M4A Surround (MQ)</option>
                            <option value="surr-hq">M4A Surround (HQ)</option>
                        </select>
                        <script>
                            id("deezer-settings-quality").onchange = function() {
                                const n = id("deezer-settings-quality").options[id("deezer-settings-quality").selectedIndex];
                                if (window.nMusic.currentSession) {
                                    nMusic.currentSession.settings.deezer_quality = n.getAttribute("value");
                                }
                            }
                        </script>
                        <div style="clear: both;"></div>
                    </div>
                </div>
                <div id="newcfg-Lab" class="tabcontent" style="display: hidden; overflow-y: hidden;">
                    <h3>Experimental Lab.</h3>
                </div>
            </div>
            <center style="margin-top: 20px;">
                <div>
                    <div>
                        <!--Enter a Video URL/Playlist URL/Search term/Music Code.-->
                        <!--<input id="__main_ui_music_input" type="text" autocomplete="off" placeholder="@DEPRECATION_REMOVAL" style="width: 60%; display: inline-block;" />-->
                        <button id="__main_ui_stop_stream" style="display: none; visibility: hidden;">Stop livestream.</button>
                    </div>
                    <p style="font-size: 12px; font-family: monospace;">
                        <span id="__main_ui_search_subtext">Supported platforms: YouTube, Soundcloud, RaveDJ.</span> <br>
                        Your Session ID: <span id="__main_ui_id" >N/A</span>
                    </p>
                    <script>
                        const __nMUSIC_LOCALE = ["Supported platforms: YouTube, Deezer, Soundcloud, RaveDJ.", "It just works(tm)",
                            "nMusic accepts both links from nTube and YouTube.", "Spotify wen!?", "Broken since now!",
                            "Deezer is now a thing.", "<span style=\"color: #b5bd68;\">&gt;his mixtape isn't on fire</span>"];
                        const __MC_INPUT = id("new-menu-search");
                        const __SUB_TEXT = id("__main_ui_search_subtext");
                        function __nmusic_init_song() {
                            const data = __MC_INPUT.value;
                            if (data === null || data === undefined || data.length === 0 || data === " ") {
                                return;
                            }
                            var div = document.createElement("div");
                            div.setAttribute("data-url", data);
                            div.setAttribute("data-url-verified", false);
                            div.style.paddingLeft = "5px";
                            div.style.borderBottom = "1px solid green";
                            var p = document.createElement("p");
                            p.innerHTML = data + " (Waiting...)";
                            div.appendChild(p);
                            id("__main_ui_playlist_div").appendChild(div);
                            playlist_iter();
                            __MC_INPUT.value = "";
                        }
                        __MC_INPUT.addEventListener("keypress", function (event) {
                            if (event.keyCode == 13) {
                                event.preventDefault();
                                __nmusic_init_song();
                            }
                        });
                        window.searchSubTextInterval = setInterval(function() {
                            var y = __nMUSIC_LOCALE.random();
                            if (y === __SUB_TEXT.innerHTML) {
                                return;
                            }
                            fadeout(__SUB_TEXT, function() {
                                __SUB_TEXT.innerHTML = y;
                                fadein(__SUB_TEXT);
                            });
                        }, 15000);
                    </script>
                </div>
            </center>
            <h2>Playlist.</h2>
            <!--
            Example data:
                <div data-url="%FULL_URL%" data-processed="BOOLEAN" MUSIC_URL="%url%"></div>
            -->
            <div id="__main_ui_playlist_div" style="border: 1px solid gray; height: 78vh; overflow-y: scroll;">
            </div>
            <script>
                function playlist_iter() {
                    const PLAYLIST = id("__main_ui_playlist_div");
                    if (PLAYLIST.children.length == 0) {
                        return;
                    }else {
                        if (!nMusic.currentSession.isPlaying) {
                            if (window.currentIntervalEvent !== undefined) {
                                window.clearInterval(window.currentIntervalEvent);
                                window.currentIntervalEvent = undefined;
                            }
                            const i0 = PLAYLIST.children[0];
                            var data = i0.getAttribute("data-url");
                            const isYouTube = ((data.contains("youtube.com") && data.contains("watch?v=")) ||
                                ((data.contains("127.0.0.1:8080") && data.contains("watch?v="))) || (data.contains("ntube.local") && data.contains("watch?v=")));
                            const isRaveDJ = data.contains("rave.dj") && data.contains("dj/");
                            const isHiveUK = data.toLowerCase() === "!hive" || data.toLowerCase() === "!hiveUK";
                            const isJSON = data.startsWith("{") && data.endsWith("}");
                            function _isInteger(d) {
                                try {
                                    parseInt(d);
                                    return true;
                                }catch (error) {
                                    return false;
                                }
                            }
                            const isSongID = _isInteger(data);
                            if (isYouTube || isJSON) {
                                const vid = getQueryVariableString(data, "v");
                                const pp = id("__overlay_ui_audio");
                                const d = function(data) {
                                    const jsonObject = JSON.parse(data);
                                    window.cjso = jsonObject;
                                    const title = jsonObject.metadata.title;
                                    const artist = jsonObject.metadata.author;
                                    i0.children[0].innerHTML = title;
                                    i0.children[0].style.color = "greenyellow";
                                    fadeout(id("__overlay_now_playing"), function() {
                                        id("__overlay_now_playing").innerHTML = title;
                                        fadein(id("__overlay_now_playing"));
                                    });
                                    fadeout(id("__overlay_now_playing_artist"), function() {
                                        id("__overlay_now_playing_artist").innerHTML = artist;
                                        fadein(id("__overlay_now_playing_artist"));
                                    });
                                    fadeout(id("__overlay_now_playing_artist"), function() {
                                        show(id("__overlay_now_playing_subtext_overlay"));
                                        id("__overlay_now_playing_subtext").innerHTML = "Provided via nTube.";
                                        fadein(id("__overlay_now_playing_subtext"));
                                    });
                                    fadeout(id("__overlay_now_playing_image"), function() {
                                        hide(id("__overlay_now_playing_image"));
                                    });
                                    id("__overlay_ui_audio").src = jsonObject.videos.audioStreams[jsonObject.videos.preferred.audio].proxied_url;
                                    try {
                                        id("__overlay_ui_audio").play();
                                    }catch (e) {}
                                    nMusic.currentSession.isPlaying = true;
                                    if (window.MediaMetadata && 'mediaSession' in navigator) {
                                        navigator.mediaSession.metadata = new MediaMetadata({
                                            title: jsonObject.metadata.title,
                                            artist: jsonObject.metadata.author,
                                            album: "nMusic.",
                                            artwork: [
                                                {
                                                    src: "http://i.ytimg.com/vi/" + vid + "/mqdefault.jpg",
                                                    sizes: "320x180",
                                                },
                                                {
                                                    src: "http://i.ytimg.com/vi/" + vid + "/default.jpg",
                                                    sizes: "120x90",
                                                }
                                            ],
                                        });
                                        navigator.mediaSession.setActionHandler('play', function() {
                                            pp.play();
                                            navigator.mediaSession.playbackState = "playing";
                                        });
                                        navigator.mediaSession.setActionHandler('pause', function() {
                                            pp.pause();
                                            navigator.mediaSession.playbackState = "paused";
                                        });
                                        navigator.mediaSession.setActionHandler('nexttrack', function() {
                                            nMusic.currentSession.isPlaying = false;
                                            const PLAYLIST = id("__main_ui_playlist_div");
                                            const i0 = PLAYLIST.children[0];
                                            PLAYLIST.removeChild(i0);
                                            playlist_iter();
                                        });
                                    }
                                };
                                if (isJSON) {
                                    d(data);
                                }else {
                                    request("/api/get_video?v=" + vid + "&prefer=144&allowWebM", null, function(exception) {
                                        console.error(exception);
                                        PLAYLIST.removeChild(i0);
                                        alert("Failed to add video!\nCheck your browser console for more information.");
                                    }, d);
                                }
                            }else if (isRaveDJ) {
                                const vid = data.substring(data.indexOf("dj/") + 3, data.length);
                            }else if (isHiveUK) {
                                request("/nmusic/get?target=hive_uk", null, function(exception) {
                                    console.error(exception);
                                    PLAYLIST.removeChild(i0);
                                }, function (data) {
                                    const jsonObject = JSON.parse(data);
                                    id("__main_ui_stop_stream").style.display = "inline-block";
                                    id("__main_ui_stop_stream").style.visibility = "";
                                    window.cjso = jsonObject;
                                    i0.children[0].innerHTML = "HiveUK";
                                    i0.children[0].style.color = "greenyellow";
                                    var onp = id("__overlay_now_playing");
                                    fadeout(onp, function() {
                                        id("__overlay_now_playing").innerHTML = "HiveUK";
                                        id("__overlay_now_playing_artist").innerHTML = "";
                                        onp.innerHTML = "Loading metadata...";
                                        fadein(onp);
                                    });
                                    fadeout(id("__overlay_now_playing_image"), function() {
                                        hide(id("__overlay_now_playing_image"));
                                    });
                                    id("__overlay_ui_audio").src = jsonObject.url;
                                    try {
                                        id("__overlay_ui_audio").play();
                                    }catch (e) {}
                                    nMusic.currentSession.isPlaying = true;
                                    window.currentIntervalEvent = window.setInterval(function() {
                                        request("/nmusic/get?target=hive_uk&action=get_metadata", null, function(exception) {
                                            console.error(exception);
                                        }, function (data) {
                                            const jsonObject = JSON.parse(data);
                                            if (id("__overlay_now_playing").innerText === jsonObject.playing) {
                                                return;
                                            }else {
                                                fadeout(onp, function() {
                                                    id("__overlay_now_playing").innerHTML = jsonObject.playing;
                                                    fadein(onp);
                                                });
                                            }
                                            if (id("__overlay_now_playing_artist").innerText === jsonObject.dj) {
                                                return;
                                            }else {
                                                fadeout(id("__overlay_now_playing_artist"), function() {
                                                    id("__overlay_now_playing_artist").innerHTML = jsonObject.dj;
                                                    fadein(id("__overlay_now_playing_artist"));
                                                });
                                            }
                                            if (window.MediaMetadata && 'mediaSession' in navigator) {
                                                navigator.mediaSession.metadata = new MediaMetadata({
                                                    title: jsonObject.playing,
                                                    artist: jsonObject.dj,
                                                    album: "nMusic and HiveUK.",
                                                });
                                                navigator.mediaSession.setActionHandler('play', function() {
                                                    pp.play();
                                                    navigator.mediaSession.playbackState = "playing";
                                                });
                                                navigator.mediaSession.setActionHandler('pause', function() {
                                                    pp.pause();
                                                    navigator.mediaSession.playbackState = "paused";
                                                });
                                                navigator.mediaSession.setActionHandler('nexttrack', function() {
                                                    nMusic.currentSession.isPlaying = false;
                                                    const PLAYLIST = id("__main_ui_playlist_div");
                                                    const i0 = PLAYLIST.children[0];
                                                    id("__main_ui_stop_stream").style.display = "none";
                                                    id("__main_ui_stop_stream").style.visibility = "hidden";
                                                    PLAYLIST.removeChild(i0);
                                                    playlist_iter();
                                                });
                                            }
                                        });
                                    }, 25 * 1000);
                                    try {
                                        request("/nmusic/get?target=hive_uk&action=get_metadata", null, function(exception) {
                                            console.error(exception);
                                        }, function (data) {
                                            const jsonObject = JSON.parse(data);
                                            fadeout(onp, function() {
                                                id("__overlay_now_playing").innerHTML = jsonObject.playing;
                                                fadein(onp);
                                            });
                                            fadeout(id("__overlay_now_playing_artist"), function() {
                                                id("__overlay_now_playing_artist").innerHTML = jsonObject.dj;
                                                fadein(id("__overlay_now_playing_artist"));
                                            });
                                            fadeout(id("__overlay_now_playing_subtext"), function() {
                                                id("__overlay_now_playing_subtext").innerHTML = "Provided via HiveUK.";
                                                show(id("__overlay_now_playing_subtext_overlay"));
                                                fadein(id("__overlay_now_playing_subtext"));
                                            });
                                            if (window.MediaMetadata && 'mediaSession' in navigator) {
                                                navigator.mediaSession.metadata = new MediaMetadata({
                                                    title: jsonObject.playing,
                                                    artist: jsonObject.dj,
                                                    album: "nMusic and HiveUK.",
                                                });
                                                navigator.mediaSession.setActionHandler('play', function() {
                                                    pp.play();
                                                    navigator.mediaSession.playbackState = "playing";
                                                });
                                                navigator.mediaSession.setActionHandler('pause', function() {
                                                    pp.pause();
                                                    navigator.mediaSession.playbackState = "paused";
                                                });
                                                navigator.mediaSession.setActionHandler('nexttrack', function() {
                                                    nMusic.currentSession.isPlaying = false;
                                                    const PLAYLIST = id("__main_ui_playlist_div");
                                                    const i0 = PLAYLIST.children[0];
                                                    id("__main_ui_stop_stream").style.display = "none";
                                                    id("__main_ui_stop_stream").style.visibility = "hidden";
                                                    PLAYLIST.removeChild(i0);
                                                    playlist_iter();
                                                });
                                            }
                                        });
                                    }catch (e) {
                                        console.error(exception);
                                    }
                                });
                            }else if (isSongID && window.nMusic.currentSession.integration
                                .deezer !== null && typeof window.nMusic.currentSession.integration
                                .deezer === "string") {
                                const sid = parseInt(data); // TODO: Spotify and Deezer segreation, for now assume Deezer.
                                var n = "";
                                if (nMusic.currentSession.settings.deezer_quality) {
                                    n += "&q=" + nMusic.currentSession.settings.deezer_quality;
                                }
                                request("/nmusic/get?target=deezer&action=track_get&track=" + sid + n, window.nMusic.currentSession.integration
                                .deezer, function(error) {
                                    console.error(error);
                                }, function(data) {
                                    const jsonObject = JSON.parse(data);
                                    id("__overlay_ui_audio").src = jsonObject.url;
                                    try {
                                        id("__overlay_ui_audio").play();
                                    }catch (e) {}
                                    try {
                                        i0.children[0].innerHTML = jsonObject.track + " - " + jsonObject.artist;
                                        clearArray(window.nMusic.Lyrics.stream);
                                    }catch (e) {}
                                    nMusic.currentSession.isPlaying = true;
                                    const onp = id("__overlay_now_playing");
                                    fadeout(onp, function() {
                                        id("__overlay_now_playing").innerHTML = jsonObject.track;
                                        fadein(onp);
                                    });
                                    fadeout(id("__overlay_now_playing_artist"), function() {
                                        id("__overlay_now_playing_artist").innerHTML = jsonObject.artist;
                                        fadein(id("__overlay_now_playing_artist"));
                                    });
                                    fadeout(id("__overlay_now_playing_subtext"), function() {
                                        id("__overlay_now_playing_subtext").innerHTML = jsonObject.album;
                                        show(id("__overlay_now_playing_subtext_overlay"));
                                        fadein(id("__overlay_now_playing_subtext"));
                                    });
                                    show(id("__overlay_now_playing_image"));
                                    fadein(id("__overlay_now_playing_image"));
                                    id("__overlay_now_playing_img").src = jsonObject.pics.medium;
                                    if (jsonObject.lyrics) {
                                        window.nMusic.Lyrics.stream = jsonObject.lyrics;
                                        show(id("lyric-overlay"));
                                    }else {
                                        hide(id("lyric-overlay"));
                                    }
                                    if (window.MediaMetadata && 'mediaSession' in navigator) {
                                        navigator.mediaSession.metadata = new MediaMetadata({
                                            title: jsonObject.track,
                                            artist: jsonObject.artist,
                                            album: jsonObject.album,
                                            artwork: [
                                                {
                                                    src: jsonObject.pics.small,
                                                    sizes: "56x56",
                                                },
                                                {
                                                    src: jsonObject.pics.medium,
                                                    sizes: "250x250",
                                                },
                                                {
                                                    src: jsonObject.pics.large,
                                                    sizes: "500x500",
                                                },
                                                {
                                                    src: jsonObject.pics.xl,
                                                    sizes: "1000x1000",
                                                }
                                            ],
                                        });
                                        navigator.mediaSession.setActionHandler('play', function() {
                                            pp.play();
                                            navigator.mediaSession.playbackState = "playing";
                                        });
                                        navigator.mediaSession.setActionHandler('pause', function() {
                                            pp.pause();
                                            navigator.mediaSession.playbackState = "paused";
                                        });
                                        navigator.mediaSession.setActionHandler('nexttrack', function() {
                                            nMusic.currentSession.isPlaying = false;
                                            const PLAYLIST = id("__main_ui_playlist_div");
                                            const i0 = PLAYLIST.children[0];
                                            PLAYLIST.removeChild(i0);
                                            playlist_iter();
                                        });
                                    }
                                });
                                // TODO: Implement nMusic->Undeezerified
                            }else if (data.startsWith("!jet")) {
                                const o = data.split(" ");
                                if (o.length === 0) {
                                    alert("Unknown data provided!\nGot: " + data);
                                    PLAYLIST.removeChild(i0);
                                    return;
                                }else if (o[0] !== "!jet" && o[0] !== "!jetsetradio") {
                                    alert("Unknown data provided!\nGot: " + data);
                                    PLAYLIST.removeChild(i0);
                                    return;
                                }else {
                                    var playlist = null;
                                    if (o.length > 1) {
                                        playlist = o[1];
                                    }
                                    request("/nmusic/get?target=radio_jetset&action=" + (playlist === null ? "get_random" : "get&playlist=" + playlist), function(error) {
                                        console.error(error);
                                        alert("Failed to get playlist.");
                                        PLAYLIST.removeChild(i0);
                                    }, function(data) {
                                        const jsonObject = JSON.parse(data);
                                        if (jsonObject["tracks"]) {
                                            for (var i = 0; i < jsonObject["tracks"].length; i++) {
                                                const track = jsonObject["tracks"][i];
                                                var div = document.createElement("div");
                                                div.setAttribute("data-url", "url;" + JSON.stringify(track));
                                                div.setAttribute("data-url-verified", true);
                                                div.style.paddingLeft = "5px";
                                                div.style.borderBottom = "1px solid green";
                                                var p = document.createElement("p");
                                                p.innerHTML = track.name;
                                                div.appendChild(p);
                                                id("__main_ui_playlist_div").appendChild(div);
                                            }
                                            PLAYLIST.removeChild(i0);
                                            playlist_iter();
                                        }
                                    });
                                }
                            }else if (data.startsWith("url;")) {
                                const payload = data.substring("url;".length);
                                if (payload.startsWith("{") && payload.endsWith("}")) {
                                    const o = JSON.parse(payload);
                                    if (o["name"] && o["url"]) {
                                        const onp = id("__overlay_now_playing");
                                        fadeout(onp, function() {
                                            id("__overlay_now_playing").innerHTML = o.name;
                                            fadein(onp);
                                        });
                                        fadeout(id("__overlay_now_playing_artist"));
                                        fadeout(id("__overlay_now_playing_subtext"));
                                        id("__overlay_ui_audio").src = "/proxyAPI?url=" + o.url;
                                        try {
                                            id("__overlay_ui_audio").play();
                                        }catch (e) {}
                                        nMusic.currentSession.isPlaying = true;
                                        i0.children[0].style.color = "greenyellow";
                                        if (window.MediaMetadata && 'mediaSession' in navigator) {
                                            navigator.mediaSession.metadata = new MediaMetadata({
                                                title: o.name,
                                            });
                                            navigator.mediaSession.setActionHandler('play', function() {
                                                pp.play();
                                                navigator.mediaSession.playbackState = "playing";
                                            });
                                            navigator.mediaSession.setActionHandler('pause', function() {
                                                pp.pause();
                                                navigator.mediaSession.playbackState = "paused";
                                            });
                                            navigator.mediaSession.setActionHandler('nexttrack', function() {
                                                nMusic.currentSession.isPlaying = false;
                                                const PLAYLIST = id("__main_ui_playlist_div");
                                                const i0 = PLAYLIST.children[0];
                                                PLAYLIST.removeChild(i0);
                                                playlist_iter();
                                            });
                                        }
                                    }else if (o["url"]) {
                                        const onp = id("__overlay_now_playing");
                                        fadeout(onp);
                                        fadeout(id("__overlay_now_playing_artist"));
                                        fadeout(id("__overlay_now_playing_subtext"));
                                        id("__overlay_ui_audio").src = "/proxyAPI?url=" + o.url;
                                        try {
                                            id("__overlay_ui_audio").play();
                                        }catch (e) {}
                                        nMusic.currentSession.isPlaying = true;
                                        i0.children[0].style.color = "greenyellow";
                                    }else {
                                        alert("Unknown data provided!\nGot: " + data);
                                        PLAYLIST.removeChild(i0);
                                    }
                                }else {
                                    alert("Unknown data provided!\nGot: " + data);
                                    PLAYLIST.removeChild(i0);
                                }
                            }else {
                                alert("Unknown data provided!\nGot: " + data);
                                PLAYLIST.removeChild(i0);
                            }
                        }
                    }
                }
            </script>
        </div>
        <style>
            body .player {
                z-index: 10;
                background: rgba(17, 17, 17, 0.8);;
                color: inherit;
                min-height: 80px;
                max-height: 80px;
                display: flex;
                flex-direction: row;
            }
            body .player a {
                color: inherit;
                text-decoration: none;
            }
            body .player .left {
                width: 80px;
                background-color: gray;
                background-size: cover;
            }
            body .player .right {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
            }
            body .player .right .top {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-left: 10px;
            }
            body .player .right .top .song {
                font-size: 1.2em;
                font-weight: 600;
            }
            body .player .right .bottom {
                display: flex;
            }
            body .player .right .bottom audio {
                flex-grow: 1;
                height: 32px;
            }
            a.disabled {
                pointer-events: none;
                cursor: default;
            }
        </style>
        <div id="__equalizer_overlay" style="position: absolute; z-index: 2; width: 100%; height: 80px; bottom: 0; left: 0; overflow-y: hidden;">
            <canvas id="__equalizer_canvas" style="width: 100%; height: 100%"></canvas>
            <script defer="defer">
                window.onload = function() {
                    id("new-menu-collapser").onclick = function() {
                        if (isVisible(id("new-menu"))) {
                            id("new-menu").classList.add("hide");
                            id("new-menu-collapser").src = "resources/icons/collapse.png";
                            id("new-menu-collapser").alt = "&lt;&lt";
                        }else {
                            id("new-menu").classList.remove("hide");
                            id("new-menu-collapser").src = "resources/icons/expand.png";
                            id("new-menu-collapser").alt = ">>";
                        }
                    };
                    id("new-menu-settings-button").onclick = function() {
                    	if (window.nMusic.currentSession !== undefined && window.nMusic
                                .currentSession !== null) {
                    		show(id("newsettings"));
                    	}else {
                    		alert("A session is required in order to configure things!");
                    	}
                    }
                    function hasSettings() {
			            try {
				            const y = Settings.load("ntube_settings");
				            return y !== null && isJson(y);
			            }catch (e) {
				            console.error(e);
				            return false;
			            }
		            }
		            if (hasSettings()) {
			            console.debug("Loading settings...");
			            window.__SETTINGS_OBJECT = Settings.load("ntube_settings");
			            if (window.__SETTINGS_OBJECT.appearance.enable_apple_look) {
				            id("poly-item-css").innerHTML = ".poly-item {padding-left: 5px; box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 10px;}";
			            }
		            }
                    if (window.Audio && window.AudioContext) {
                        var canvas,
                        ctx,
                        source,
                        context,
                        analyser,
                        fbc_array,
                        bar_count,
                        bar_pos,
                        bar_width,
                        bar_height;
                        run_promise(function() {
                            function FrameLooper() {
                                const visible = !id("__overlay_ui_audio").paused && !document.hidden;
                                if (visible) {
                                    window.RequestAnimationFrame =
                                    window.requestAnimationFrame(FrameLooper) ||
                                        window.msRequestAnimationFrame(FrameLooper) ||
                                        window.mozRequestAnimationFrame(FrameLooper) ||
                                        window.webkitRequestAnimationFrame(FrameLooper);
                                }else {
                                    setTimeout(FrameLooper, 333);
                                }
                                if (visible) {
                                    fbc_array = new Uint8Array(analyser.frequencyBinCount);
                                    bar_count = window.innerWidth / 2;
            
                                    analyser.getByteFrequencyData(fbc_array);
            
                                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                                    ctx.fillStyle = "#ffffff";
            
                                    for (var i = 0; i < bar_count; i++) {
                                        bar_pos = i * 4;
                                        bar_width = 2;
                                        bar_height = -(fbc_array[i] / 2);
                                        ctx.fillRect(bar_pos, canvas.height, bar_width, bar_height);
                                    }
                                }
                            }
                            context = new AudioContext();
                            analyser = context.createAnalyser();
                            canvas = id("__equalizer_canvas");
                            ctx = canvas.getContext("2d");
                            source = context.createMediaElementSource(id("__overlay_ui_audio"));
            
                            source.connect(analyser);
                            analyser.connect(context.destination);
            
                            FrameLooper();
                        });
                    }
                }
            </script>
        </div>
        <div id="lyric-overlay" style="display: none; visibility: hidden; position: absolute; z-index: 4; margin-left: -5px; bottom: 60px; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">
            <div style="background: rgba(0, 0, 0, 0.9); padding: 2px; padding-top: 0px; padding-bottom: 0px; border: 1px solid green;">
                <p class="unselectable" id="lyric-text" style="font-weight: 400; margin: 0px;"></p>
            </div>
        </div>
        <div id="__overlay" style="position: absolute; z-index: 3; width: 100%; height: 80px; bottom: 0; left: 0; overflow-y: hidden; display: none; visibility: hidden; opacity: 0;">
            <div style="background-color: rgba(17, 17, 17, 0.8); width: 100%; height: 80px; border-top: 1px solid green; backdrop-filter: blur(2px);">
                <div class="player">
                    <div id="__overlay_now_playing_image" class="left" style="display: none; visibility: hidden;">
                        <img id="__overlay_now_playing_img" style="height: 80px; width: 80px;" />
                    </div>
                    <div class="right">
                       <div class="top">
                          <a id="__overlay_now_playing" href="" class="song disabled">Waiting...</a>
                          <a href="" class="artist disabled">
                              <span id="__overlay_now_playing_artist"></span>
                              <span id="__overlay_now_playing_subtext_overlay" style="display: none; visibility: hidden;">&centerdot;
                                <span id="__overlay_now_playing_subtext" style="font-size: small;"></span>
                              </span>
                          </a>
                       </div>
                       <div class="bottom">
                          <style>
                            audio::-webkit-media-controls-enclosure {
                                background: inherit !important;
                                color: white !important;
                                filter: invert(1);
                            }
                            /* Dear Mozilla, expose @videocontrols.css->.controlBar you lazy fucks. */
                          </style>
                          <audio id="__overlay_ui_audio" controls="true" autoplay="autoplay" name="media" src="" crossOrigin="anonymous" style="max-width: 100%;">
                       </div>
                    </div>
                    <script defer="defer">
                            id("__main_ui_stop_stream").onclick = function() {
                                id("__overlay_ui_audio").onended();
                            }
                            id("__overlay_ui_audio").onended = function() {
                                if (window.nMusic.currentSession !== null) {
                                    nMusic.currentSession.isPlaying = false;
                                    const PLAYLIST = id("__main_ui_playlist_div");
                                    const i0 = PLAYLIST.children[0];
                                    PLAYLIST.removeChild(i0);
                                    id("__main_ui_stop_stream").style.display = "none";
                                    id("__main_ui_stop_stream").style.visibility = "hidden";
                                    playlist_iter();
                                }
                            }
                            /*
                                {text: "...", stamp: millis}
                             */
                            window.nMusic.Lyrics = {stream: []};
                            run_promise(function() {
                                const USE_ONTIMEUPDATE = true;
                                function _full_iteration() {
                                    const ct = id("__overlay_ui_audio").currentTime;
                                    const ctm = (ct * 1000);
                                    for (var i = 0; i < nMusic.Lyrics.stream.length; i++) {
                                        const l = nMusic.Lyrics.stream[i];
                                        if (i == nMusic.Lyrics.stream.length - 1) {
                                            const fs = l.stamp + 720;
                                            if (fs >= ctm) {
                                                id("lyric-text").innerHTML = l.text;
                                                break;
                                            }
                                        }else {
                                            const n = nMusic.Lyrics.stream[i + 1];
                                            const fs = l.stamp + (n.stamp - l.stamp);
                                            if (fs >= ctm && ctm < n.stamp) {
                                                id("lyric-text").innerHTML = l.text;
                                                break;
                                            }
                                        }
                                    }
                                }
                                if (USE_ONTIMEUPDATE) {
                                    id("__overlay_ui_audio").addEventListener("ontimeupdate", function() {
                                        if (id("__overlay_ui_audio").paused) return; // not likely
                                        if (nMusic.Lyrics.stream.length <= 0) return;
                                        _full_iteration();
                                    });
                                }else {
                                    function _lyric_iteration() {
                                        if (id("__overlay_ui_audio").paused) return;
                                        if (nMusic.Lyrics.stream.length <= 0) return;
                                        _full_iteration();
                                    }
                                    setInterval(_lyric_iteration, 100);
                                }
                            })
                    </script>
                 </div>
                <!--<div style="display: inline; vertical-align: middle;">
                    <img style="background-color: #444; width: 72px; height: 72px; margin-left: 15px; margin-top: 12px; display: inline; vertical-align: middle;" src="" alt="$Music.artistImage">
                    <div style="display: inline; vertical-align: middle; margin-left: 5px;">
                        <p id="__overlay_now_playing" style="display: inline; vertical-align: top; position: absolute; margin-bottom: 5px; font-size: large;">$Music.title</p>
                        <p id="__overlay_now_playing_artist" style="display: inline; vertical-align: middle; position: absolute; font-size: small; margin-top: 45px;">$Music.artist</p>
                        <p id="__overlay_now_playing_subtext" style="display: inline; vertical-align: bottom; position: absolute; font-size: 11px; margin-top: 60px;">$Music.subArtistText</p>
                    </div>
                </div>
                <center style="display: inline; vertical-align: middle; margin-left: 20%;">
                        <audio id="__overlay_ui_audio" controls="true" autoplay="true" style="vertical-align: middle; width: 50%; margin-left: 20%;"></audio>
                        <script>
                            id("__main_ui_stop_stream").onclick = function() {
                                id("__overlay_ui_audio").onended();
                            }
                            id("__overlay_ui_audio").onended = function() {
                                if (window.nMusic.currentSession !== null) {
                                    nMusic.currentSession.isPlaying = false;
                                    const PLAYLIST = id("__main_ui_playlist_div");
                                    const i0 = PLAYLIST.children[0];
                                    PLAYLIST.removeChild(i0);
                                    id("__main_ui_stop_stream").style.display = "none";
                                    id("__main_ui_stop_stream").style.visibility = "hidden";
                                    playlist_iter();
                                }
                            }
                        </script>
                </center>-->
            </div>
        </div>
        <script>
        try {
            nTube.init();
        }catch (e) {}
        //if (window.location.toString().contains("file:///")) {
       //     console.warn("Local file opened, assuming dev mode is enabled.");
        //    nMusic.oneTimeSession();
        //}
        </script>
    </body>
</html>